{% extends "base.html" %}

{% block title %}电影推荐 - 智能推荐系统{% endblock %}

{% block content %}
<div class="container">
    <!-- 系统状态指示器 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h5 class="card-title mb-1">
                                <i class="fas fa-robot me-2"></i>个性化推荐已就绪
                            </h5>
                            <p class="card-text mb-0">基于您的观影偏好和探索倾向，为您精心挑选</p>
                        </div>
                        <div class="col-md-4 text-end">
                            <button class="btn btn-light" onclick="refreshRecommendations()">
                                <i class="fas fa-sync-alt me-1"></i>刷新推荐
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if system_ready and movies %}
    <!-- 推荐分布统计 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="fas fa-chart-pie me-2"></i>推荐来源分布</h6>
                </div>
                <div class="card-body py-2">
                    <div class="row text-center">
                        {% for pool, count in pool_distribution.items() %}
                        <div class="col">
                            <div class="pool-stat">
                                <div class="pool-name">{{ pool_names.get(pool, pool) }}</div>
                                <div class="pool-count">{{ count }}</div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 推荐解释 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-light border-start border-primary border-4" id="recommendation-explanation">
                <i class="fas fa-lightbulb me-2"></i>
                <span id="explanation-text">正在分析您的推荐...</span>
            </div>
        </div>
    </div>

    <!-- 电影推荐网格 -->
    <div class="row" id="movie-grid">
        {% for movie in movies %}
        <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
            <div class="card movie-card h-100" data-movie-id="{{ movie.movieId }}">
                <div class="card-header bg-{{ pool_color.get(movie.pool, 'secondary') }} text-white py-2">
                    <small class="text-uppercase">
                        <i class="fas fa-tag me-1"></i>{{ pool_names.get(movie.pool, movie.pool) }}
                    </small>
                </div>

                <div class="card-body">
                    <h6 class="card-title">{{ movie.title or 'Movie ' + movie.movieId|string }}</h6>

                    <div class="movie-info mb-2">
                        <small class="text-muted">
                            <i class="fas fa-star me-1"></i>评分: {{ "%.1f"|format(movie.avg_rating) }}
                            <span class="ms-2">
                                <i class="fas fa-users me-1"></i>{{ movie.rating_count }} 人评价
                            </span>
                        </small>
                    </div>

                    <div class="genres mb-2">
                        {% for genre in movie.genres[:3] %}
                        <span class="badge bg-light text-dark me-1">{{ genre }}</span>
                        {% endfor %}
                    </div>

                    <div class="quality-indicator mb-3">
                        <small class="text-muted">质量分数: {{ "%.1f"|format(movie.quality_score) }}</small>
                        <div class="progress" style="height: 4px;">
                            <div class="progress-bar" role="progressbar"
                                 style="width: {{ (movie.quality_score / 5 * 100)|int }}%"></div>
                        </div>
                    </div>
                </div>

                <div class="card-footer bg-transparent">
                    <div class="btn-group w-100" role="group">
                        <button type="button" class="btn btn-outline-primary btn-sm"
                                onclick="viewMovie({{ movie.movieId }})">
                            <i class="fas fa-eye me-1"></i>详情
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm"
                                onclick="likeMovie({{ movie.movieId }})">
                            <i class="fas fa-heart me-1"></i>喜欢
                        </button>
                        <button type="button" class="btn btn-outline-warning btn-sm"
                                onclick="showRatingModal({{ movie.movieId }})">
                            <i class="fas fa-star me-1"></i>评分
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% else %}
    <!-- 系统未就绪状态 -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body text-center py-5">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <h5>推荐系统正在初始化...</h5>
                    <p class="text-muted">首次启动需要加载模型，请稍等片刻</p>
                    <button class="btn btn-primary" onclick="location.reload()">
                        <i class="fas fa-sync-alt me-1"></i>刷新页面
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- 评分模态框 -->
<div class="modal fade" id="ratingModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">为电影评分</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <p>请为这部电影打分：</p>
                    <div class="rating-stars mb-3">
                        {% for i in range(1, 6) %}
                        <i class="fas fa-star rating-star" data-rating="{{ i }}"></i>
                        {% endfor %}
                    </div>
                    <input type="hidden" id="current-movie-id">
                    <input type="hidden" id="current-rating" value="0">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitRating()">提交评分</button>
            </div>
        </div>
    </div>
</div>

<script>
// 设置模板变量
const poolNames = {
    'cold_start': '冷启动',
    'test': '测试池',
    'growth': '成长池',
    'mature': '成熟池',
    'long_tail': '长尾'
};

const poolColor = {
    'cold_start': 'info',
    'test': 'warning',
    'growth': 'success',
    'mature': 'primary',
    'long_tail': 'danger'
};

// 加载推荐解释
$(document).ready(function() {
    loadRecommendationExplanation();
});
</script>
{% endblock %}

{% block extra_scripts %}
<script>
// 推荐相关JavaScript函数会在main.js中定义
</script>
{% endblock %}